import React, { Component } from 'react'
import {
  View,
  StyleSheet,
  SafeAreaView,
  TouchableHighlight,
  Image,
  Text,
  ScrollView,
  Button,
  TextView,
  TouchableOpacity,
  FlatList,
  ActivityIndicator,
  RefreshControl,
  Dimensions
} from 'react-native'
import {
  width,
  titleHeight,
  deviceWidth,
  unitWidth,
  statusBarHeight,
  reallySize,
} from '../../utils/Global';
import { Tabs } from '@ant-design/react-native';
import ImagePicker from 'react-native-image-crop-picker';
import { GET_USER_SOCIALCIRCLE, GET_USER_SOCIALCIRCLE_FRIEND, POST_USER_SOCIALCIRCLE_PRAISE, POST_USER_SOCIALCIRCLE_ALLNOTICENUM, POST_APPPOSITION_ADD } from '../../public/WebApi/socialcircleApi'
import fetchWebApi from '../../public/WebApi/fetchBase';
import getStorageValue from '../../utils/getStorageValue';
import { Constant } from '../../public/js/constant';
import Layer from "../../utils/Layer";
import { GetLocation } from '../../utils/GetLocation'
import Toast from 'react-native-root-toast';
import AsyncStorage from '@react-native-community/async-storage';
import { socialcircleEllipsis } from '../../utils/publicMethodList'
import Loading from '../../components/Loading';

const widthD = Dimensions.get('window').width;
const heightD = Dimensions.get('window').height;

export default class socialcircle extends Component {
  constructor(props) {
    super(props)
    this.isLoadingMore = false;
    this.state = {
      address: "麓谷路",
      tabList: [
        '推荐',
        '好友'
      ],
      currentTab: 0,
      mySocialCircleList: [],
      mySocialCircleListFriend: [],
      //社圈数据
      defaultTab: true,
      selectImage1: [],
      isLoading: false,
      page: 0,
      pageSize: 5,
      page2: 0,
      pageSize2: 5,
      tempAddDatas: [],
      tempAddDatas2: [],
      isRefreshing: false,
      status: 1,
      statusFriend: 1,
      latitude: 500,
      longitude: 500,
      positions: '',
      noData: false,
      datas2: [{ name: '正在获取定位', location: '' }],
      ifCount: 0,
      noticeNum: ''
    }
  }

  // async dili() {
  //   const {
  //     latitude,
  //     longitude,
  //     positions
  //   } = this.state
  //   if (latitude == 500 && longitude == 500) {
  //     console.log(latitude);
  //     return;
  //   } else {
  //     const res = await fetchWebApi(POST_APPPOSITION_ADD,

  //       {
  //         token: await getStorageValue(Constant.TOKEN),
  //         lat: latitude,
  //         lon: longitude,
  //         flag: "1",
  //         placeName: positions
  //       }, 'POST');
  //     // console.log("########## getUserMaillist########");
  //     // console.log(res);
  //     if (res.status == 200) {
  //       // console.log(this.state.DATAS)
  //       // this.setState({
  //       //   VerificationCode: res.data
  //       // })


  //     } else {
  //       Layer.showMsg(res.msg);
  //     }
  //   }
  // }  //地理

  async location() {
    this.setState({
      datas2: [{ name: '正在获取定位' }],
    })
    await GetLocation();
    setTimeout(() => {
      if (Object.keys(GetLocation()._55).length > 0) {
        this.setState({
          datas2: GetLocation()._55.positions.pois
        })
        // this.setState({
        //   : this.state.positions,
        // })
        this.setState({
          page: 0,
          // isRefreshing: true,//tag,下拉刷新中，加载完全，就设置成flase
          mySocialCircleList: []
        })
        this.getSocialCircleList(0)

        // console.log('@@@@@@@@@@@@@@@');
        // console.log(this.state.datas2);
      } else {
        this.setState({
          datas2: [{ name: '获取地理位置失败' }],
        })
        this.getSocialCircleList(0)
        return;
        // alert("获取地址失败，请重新进入系统！")
      }
      // Loading.hide()
    }, 3000)
  }

  componentDidMount = () => {
    // Loading.show()
    this.location()
    this.getNoticeNum()
    // this.getSocialCircleList()
    this.getSocialCircleListFriend(0)
  }

  //   itemMr(item,index){
  //     if((index+1)%3==0){
  // return(

  // )
  //     }

  //   }

  async getSocialCircleList(item) {
    // console.log(this.state.datas2[0].location);
    const res = await fetchWebApi(GET_USER_SOCIALCIRCLE, {
      token: await getStorageValue(Constant.TOKEN), ifCount: this.state.ifCount, location: this.state.datas2[0].location
      // , page: this.state.page, pageSize: this.state.pageSize
    }, 'POST');
    console.log("########## getSocialCircleList");
    console.log(res);

    if (res.status == 200) {
      // res.data.businessList.map((item, index) => {
      //   this.state.mySocialCircleList.push(item)
      // })
      if (item == 0) {
        this.setState({
          mySocialCircleList: res.data.businessList
        })
        if (res.data.businessList.length == 0 || res.data == null) {
          this.setState({
            ifCount: 1,
            noData: true,
            status: 0
          })
        }
      }
      else {
        this.setState({
          tempAddDatas: res.data.businessList
        })
        if (res.data.businessList.length == 0) {
          this.setState({
            ifCount: 1,
            noData: true,
            status: 0
          })
        }
      }
      // if (res.data.allCount == 1) {
      //   this.setState({
      //     noData: true,
      //     status: 0
      //   })
      // } else {
      this.setState({
        noData: false,
        status: 1
      })
      // }

      // this.getSocialCircleList()
      // console.log(this.state.tempAddDatas);
    } else if (res.status === 401) {
      console.log(res.status);
      await AsyncStorage.removeItem(Constant.TOKEN);
      this.props.navigation.push('Accountlogin')
      // 弹窗提示

    } else {
      // Layer.showMsg("获取用户信息列表失败");
    }
    console.log("----------------->")
    console.log(this.state.mySocialCircleList.length);
    console.log('___________________print Status');
    console.log(this.state.status);
  }

  async getSocialCircleListFriend(item) {

    const res = await fetchWebApi(GET_USER_SOCIALCIRCLE_FRIEND, {
      token: await getStorageValue(Constant.TOKEN)
      , page: this.state.page2, pageSize: this.state.pageSize2
    }, 'POST');
    console.log("########## GET_USER_SOCIALCIRCLE_FRIEND");
    console.log(res);
    if (res.status == 200) {
      // res.data.businessList.map((item, index) => {
      //   this.state.mySocialCircleList.push(item)
      // })
      this.setState({
        page2: this.state.page2 + this.state.pageSize2
      })
      if (item == 0) {
        this.setState({
          mySocialCircleListFriend: res.data.businessList
        })
      } else {
        this.setState({
          tempAddDatas2: res.data.businessList
        })
      }
      if (res.data.businessList.length == 0) {
        this.setState({
          statusFriend: 0
        })
      } if (res.data.businessList.length != 0) {
        this.setState({
          statusFriend: 1
        })
      }

      // this.getSocialCircleList()
      // console.log(this.state.businessList);
    } else if (res.status === 401) {
      console.log(res.status);
      await AsyncStorage.removeItem(Constant.TOKEN);
      this.props.navigation.push('Accountlogin')
      // 弹窗提示

    } else {
      // Layer.showMsg("获取用户信息列表失败");
    }

    console.log(this.state.mySocialCircleListFriend.length);
  }

  async getNoticeNum() {
    const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_ALLNOTICENUM, { token: await getStorageValue(Constant.TOKEN) }, 'GET');
    // console.log("getNoticeNum^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^");
    // console.log(res);
    if (res.status == 200) {
      this.setState({
        noticeNum: res.data
      })
    }
  }

  async postSocialCirclePraise(item) {
    const res = await fetchWebApi(POST_USER_SOCIALCIRCLE_PRAISE, { token: await getStorageValue(Constant.TOKEN), businessId: item }, 'POST');
    console.log("########## postSocialCircleListPraise");
    console.log(res);
    if (res.status == 200) {
      this.setState({
        // businessId: res.data
      })
      // this.getSocialCircleList(),
      //   this.getSocialCircleListFriend()
      // this.getSocialCircleListFriend()
    } else {
      // Layer.showMsg("获取用户信息列表失败");
    }
  }

  //推荐&关注tab栏切换
  onPreesTab = (index) => {
    this.setState({
      currentTab: index,
      // page: 0
    })
    // this.handleRefresh()
  }

  handleRefresh = () => {
    if (this.state.currentTab == 0) {
      this.setState({
        page: 0,
        isRefreshing: true,//tag,下拉刷新中，加载完全，就设置成flase
        mySocialCircleList: []
      })
      this.getSocialCircleList(0)
      this.getNoticeNum()
    } else {
      this.setState({
        page2: 0,
        isRefreshing: true,//tag,下拉刷新中，加载完全，就设置成flase
        // mySocialCircleList: [],
        mySocialCircleListFriend: []
      })
      this.getSocialCircleListFriend(0)
      this.getNoticeNum()
    }

    this.setState({
      isRefreshing: false,
      status: 1
    })
  }

  genIndicator() {
    return <View style={styles.IndicatorContainer}>
      <ActivityIndicator  //显示一个圆形的 loading 提示符号。
        style={styles.Indicator}
        size={"small"}
        animating={true}
        color={'gray'}
      />
      <Text>正在加载更多</Text>
    </View>
  }

  genIndicator2() {
    return <View style={styles.IndicatorContainer}>
      <ActivityIndicator  //显示一个圆形的 loading 提示符号。
        style={styles.Indicator}
        size={"small"}
        animating={true}
        color={'gray'}
      />
      <Text>正在加载更多</Text>
    </View>
  }

  async loadData(pullUp) {
    if (this.isLoadingMore) {
      return;
    }
    this.isLoadingMore = true;
    this.getSocialCircleList(1).then(() => {
      var dataArray = []
      // var page = 0
      dataArray = this.state.mySocialCircleList,
        dataArray = [...this.state.mySocialCircleList, ...this.state.tempAddDatas]
      this.setState({
        mySocialCircleList: dataArray,
        isLoading: false,
      })
      this.isLoadingMore = false;
      console.log("---------->" + dataArray.length)
    })

  }

  async loadData2(pullUp) {
    if (this.isLoadingMore) {
      return;
    }
    this.isLoadingMore = true;
    this.getSocialCircleListFriend(5).then(() => {

      var dataArray = []
      // var page = 0

      dataArray = this.state.mySocialCircleListFriend,
        dataArray = [...this.state.mySocialCircleListFriend, ...this.state.tempAddDatas2],

        this.setState({

          mySocialCircleListFriend: dataArray,
          isLoading: false,
        })
      this.isLoadingMore = false;
    })
  }

  _emptyList() {
    return (
      <>

        {/* 空列表提示 */}
        <View style={styles.bottom_container}>
          <Text style={styles.bottom_text}>暂无~</Text>
        </View>
      </>
    )
  }

  _renderItem1(data) {
    // console.log(data);
    return (
      // <>
      //   {
      //     data
      //       .map((item, index) => (
      <View style={styles.mySocialCircle} >
        <View style={styles.uploadBoxContainer}>
          <TouchableOpacity onPress={() => {
            this.props.navigation.push('socialcircleDetails', { businessId: data.item.businessId })
          }}>
            <View style={styles.uploadBoxHeadPortrait}>
              <View style={styles.headPortraitBox}>
                <Image
                  source={data.item.userInfoAvatar == null ? require("../../assets/images/socialcircle/defaultHeadpor.png") : { uri: data.item.userInfoAvatar }}
                  style={styles.headPortrait}
                />
              </View>

              <View style={styles.headPortraitText}>
                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
                  <Text style={styles.headPortraitName}>
                    {data.item.userInfoName}
                  </Text>
                  <Image style={{ marginTop: 3, marginLeft: 3, width: 18, height: 18 }} source={data.item.userType == 1 ? require('../../assets/images/maillist/enterprise.png') : null} />
                </View>
                <Text style={styles.headPortraitTime}>
                  {data.item.businessCreateTime}
                </Text>
              </View>
            </View>
            {/* 社圈标题 */}
            {data.item.businessTitle != "" && data.item.businessTitle != null ? <View style={styles.textTitle}>
              <Text style={styles.textTitleTexts}>
                {data.item.businessTitle}
              </Text>

            </View> : null}
            {/* 标签列表 */}
            {data.item.businessLabel != null && data.item.businessLabel.length != 0 ? <View style={styles.labelRow}>
              {data.item.businessLabel.map((item, index) => (
                <View key={index} style={{ backgroundColor: "rgba(223,239,255, 0.19)", paddingLeft: 2, paddingRight: 2, justifyContent: 'center', alignItems: 'center', marginRight: 5, borderColor: 'rgba(24, 144, 255, 1)', borderWidth: 1, borderRadius: 2 }}>
                  <Text style={styles.textContentLabel}>
                    #{item}
                  </Text>
                </View>
              ))}
            </View> : null}
            {/* 社圈内容 */}
            {/* {data.item.showInputValueContent != "" && data.item.showInputValueContent != null ? <View style={styles.textContent}>
              <Text numberOfLines={2} ellipsizeMode={'tail'}>
                {socialcircleEllipsis(data.item.showInputValueContent)}
              </Text>
            </View> : null} */}

            {/* 标签 */}


            {data.item.businessFilePath != null && data.item.businessFilePath.length != 0 ? <View style={styles.row}>
              {/* 发布的图片 */}
              {data.item.businessFilePath.slice(0, 3).map((item, index) => (
                <View style={(index + 1) % 3 == 0 ? styles.item : styles.itemMr} key={index}>
                  <Image
                    style={styles.SystemPrompt}
                    source={{ uri: item }}
                  />
                </View>
              ))}
            </View> : null}
            {/* 定位信息 */}
            {data.item.place ? <TouchableOpacity style={styles.locationBox}>
              <Image source={require("../../assets/images/socialcircle/location3.png")} style={styles.locationBoxImage}></Image>
              <Text style={styles.locationBoxFont}>
                {data.item.place}
              </Text>
            </TouchableOpacity> : null}

            {/* 阅读数量 */}
            <View style={styles.timesBox}>
              <View style={styles.timesViews}>
                <Image source={require("../../assets/images/socialcircle/browse.png")} style={styles.timesViewsImage}></Image>
                <Text style={styles.timesViewsFont}>
                  {data.item.countBrowse} 阅读
                </Text>
              </View>
              <View style={styles.likeCommentBox}>
                {/* 喜欢数量 */}
                <View style={styles.likeBox} onPress={() => {
                  // console.log(item.businessId);
                  this.postSocialCirclePraise(data.item.businessId)
                  this.setState({
                    // flag: item.likeFlag = !item.likeFlag
                  })
                }}>
                  <Image source={data.item.ifCount == 1 ? require("../../assets/images/socialcircle/like.png") : require("../../assets/images/socialcircle/like_off.png")} style={styles.likeBoxImage}></Image>
                  <Text style={styles.likeBoxFont}>
                    {data.item.countGive}
                  </Text>
                </View>
                {/* 评论数 */}
                <View style={styles.commentBox}>
                  <Image source={require("../../assets/images/socialcircle/comment.png")} style={styles.commentBoxImage}></Image>
                  <Text style={styles.commentBoxFont}>
                    {data.item.countComments}
                  </Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>

        </View>
      </View>
      //       ))}
      // </>
    )
  }

  _renderItem2(data) {
    // console.log(data);
    return (
      // <>
      //   {
      //     data
      //       .map((item, index) => (
      <View style={styles.mySocialCircle} >
        <View style={styles.uploadBoxContainer}>
          <TouchableOpacity onPress={() => {
            this.props.navigation.push('socialcircleDetails', { businessId: data.item.businessId })
          }}>
            <View style={styles.uploadBoxHeadPortrait}>
              <View style={styles.headPortraitBox}>
                <Image
                  source={data.item.userInfoAvatar == null ? require("../../assets/images/socialcircle/defaultHeadpor.png") : { uri: data.item.userInfoAvatar }}
                  style={styles.headPortrait}
                />
              </View>

              <View style={styles.headPortraitText}>
                <View style={{ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start' }}>
                  <Text style={styles.headPortraitName}>
                    {data.item.userInfoName}
                  </Text>
                  <Image style={{ marginTop: 3, marginLeft: 3, width: 18, height: 18 }} source={data.item.userType == 1 ? require('../../assets/images/maillist/enterprise.png') : null} />
                </View>
                <Text style={styles.headPortraitTime}>
                  {data.item.businessCreateTime}
                </Text>
              </View>
            </View>
            {/* 社圈标题 */}
            {data.item.businessTitle != "" && data.item.businessTitle != null ? <View style={styles.textTitle}>
              <Text style={styles.textTitleTexts}>
                {data.item.businessTitle}
              </Text>

            </View> : null}
            {/* 标签列表 */}
            {data.item.businessLabel != null && data.item.businessLabel.length != 0 ? <View style={styles.labelRow}>
              {data.item.businessLabel.map((item, index) => (
                <View key={index} style={{ backgroundColor: "rgba(223,239,255, 0.19)", paddingLeft: 2, paddingRight: 2, justifyContent: 'center', alignItems: 'center', marginRight: 5, borderColor: 'rgba(24, 144, 255, 1)', borderWidth: 1, borderRadius: 2 }}>
                  <Text style={styles.textContentLabel}>
                    #{item}
                  </Text>
                </View>
              ))}
            </View> : null}
            {/* 社圈内容 */}
            {/* {data.item.showInputValueContent != "" && data.item.showInputValueContent != null ? <View style={styles.textContent}>
              <Text numberOfLines={2} ellipsizeMode={'tail'}>
                {socialcircleEllipsis(data.item.showInputValueContent)}
              </Text>
            </View> : null} */}

            {/* 标签 */}


            {data.item.businessFilePath != null && data.item.businessFilePath.length != 0 ? <View style={styles.row}>
              {/* 发布的图片 */}
              {data.item.businessFilePath.slice(0, 3).map((item, index) => (
                <View style={(index + 1) % 3 == 0 ? styles.item : styles.itemMr} key={index}>
                  <Image
                    style={styles.SystemPrompt}
                    source={{ uri: item }}
                  />
                </View>
              ))}
            </View> : null}
            {/* 定位信息 */}
            {data.item.place ? <TouchableOpacity style={styles.locationBox}>
              <Image source={require("../../assets/images/socialcircle/location3.png")} style={styles.locationBoxImage}></Image>
              <Text style={styles.locationBoxFont}>
                {data.item.place}
              </Text>
            </TouchableOpacity> : <View style={{ margin: 4 }}></View>}

            {/* 阅读数量 */}
            <View style={styles.timesBox}>
              <View style={styles.timesViews}>
                <Image source={require("../../assets/images/socialcircle/browse.png")} style={styles.timesViewsImage}></Image>
                <Text style={styles.timesViewsFont}>
                  {data.item.countBrowse} 阅读
                </Text>
              </View>
              <View style={styles.likeCommentBox}>
                {/* 喜欢数量 */}
                <View style={styles.likeBox} onPress={() => {
                  // console.log(item.businessId);
                  this.postSocialCirclePraise(data.item.businessId)
                  this.setState({
                    // flag: item.likeFlag = !item.likeFlag
                  })
                }}>
                  <Image source={data.item.ifCount == 1 ? require("../../assets/images/socialcircle/like.png") : require("../../assets/images/socialcircle/like_off.png")} style={styles.likeBoxImage}></Image>
                  <Text style={styles.likeBoxFont}>
                    {data.item.countGive}
                  </Text>
                </View>
                {/* 评论数 */}
                <View style={styles.commentBox}>
                  <Image source={require("../../assets/images/socialcircle/comment.png")} style={styles.commentBoxImage}></Image>
                  <Text style={styles.commentBoxFont}>
                    {data.item.countComments}
                  </Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>

        </View>
      </View>
      //       ))}
      // </>
    )
  }

  render() {

    //社圈组件封装
    const mySocialCircle =
      <>

        {/* 底部提示 */}
        <View style={styles.bottom_container}>
          <Text style={styles.bottom_text}>没有更多了哦~</Text>
        </View>
      </>

    //无关注内容时显示
    const Subscribe =
      <>
        <View style={styles.subscribe_style}>
          <Text style={styles.no_subscribe_text}>暂时没有关注内容哦~</Text>
        </View>
      </>
    return (
      <View style={
        styles.container
      } >
        <View style={styles.statusBar} />
        <Loading />
        {/* 头部内容 */}
        <View style={
          styles.header
        }>

          <TouchableOpacity style={styles.location_container} onPress={() => {
            this.location()
          }}>
            <Image source={require("../../assets/images/socialcircle/location.png")}
              style={styles.location_image}
            ></Image>
            <Text style={styles.location_font}>
              {this.state.datas2[0].name}
            </Text>
            {/* <Image source={require("../../assets/images/socialcircle/more.png")}
              style={styles.more_image}
            ></Image> */}
          </TouchableOpacity>

          <TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center' }} onPress={() => {
            this.props.navigation.push('likeComment', {
              refresh: () => {
                this.getNoticeNum()
              },
            })

          }}>

            {this.state.noticeNum == 0 ? null : <View style={{ width: 16, height: 16, backgroundColor: 'red', borderRadius: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
              <Text style={{ color: 'white', fontSize: 10 }}>{this.state.noticeNum}</Text>
            </View>}
            <Image source={require("../../assets/images/socialcircle/notice.png")}
              style={styles.notice_image}
            ></Image>
          </TouchableOpacity>
        </View >

        {/* 局部内容 */}
        <View style={styles.padlr}>

          {/* tab栏 */}
          <View style={styles.tabWarper}>
            <View style={styles.tab}>
              {this.state.tabList.map((item, index) => (
                <TouchableOpacity key={index} onPress={() => {
                  this.onPreesTab(index)
                }}>
                  <Text key={index} style={this.state.currentTab == index ? styles.tabItemActive : styles.tabItemNo}>{item}</Text>
                </TouchableOpacity>
              ))}



            </View>
          </View>

          {/* 社圈推送渲染 */}
        </View>

        {this.state.currentTab == 0 ?
          <FlatList
            // refreshing={this.refreshing}
            data={this.state.mySocialCircleList}
            extraData={this.state}
            renderItem={(data) => this._renderItem1(data)}
            keyExtractor={(item, index) => String(index)}
            ref={(_flatList) => this._flatList = _flatList}
            numColumns={1}//一行一列
            scrollEnabled={this.state.currentTab == 0 ? true : false}
            ListFooterComponent={() => this.state.status == 1 ? this.genIndicator() : mySocialCircle}//底部组件
            onEndReached={//列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
              () => {
                { !this.state.noData ? this.loadData(true) : this.loadData(false) }
              }
            }
            onEndReachedThreshold={0.01}//0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发onEndReached回调
            // ListEmptyComponent={() => this._emptyList()}
            refreshControl={
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.handleRefresh.bind(this)}//因为涉及到this.state
                colors={['#ff0000', '#00ff00', '#0000ff', '#3ad564']}
                progressBackgroundColor="#ffffff"
              />
            }
          />
          :
          <FlatList
            // refreshing={this.refreshing}
            data={this.state.mySocialCircleListFriend}
            extraData={this.state}
            renderItem={(data) => this._renderItem2(data)}
            keyExtractor={(item, index) => { item.businessId, index.toString() }
              // item.businessId
            }
            ref={(flatList) => this.flatList = flatList}
            numColumns={1}//一行一列
            scrollEnabled={this.state.currentTab == 0 ? false : true}
            ListFooterComponent={() => this.state.statusFriend == 1 ? this.genIndicator() : mySocialCircle}//底部组件
            // getItemLayout={(data,index)=>(
            //   {length}
            // )}
            onEndReached={//列表被滚动到距离内容最底部不足onEndReachedThreshold设置的的距离时调用。
              () => {
                this.loadData2(true)
              }
            }
            onEndReachedThreshold={0.01}//0.5 表示距离内容最底部的距离为当前列表可见长度的一半时触发onEndReached回调
            // ListEmptyComponent={() => this._emptyList()}
            refreshControl={
              <RefreshControl
                refreshing={this.state.isRefreshing}
                onRefresh={this.handleRefresh.bind(this)}//因为涉及到this.state
                colors={['#ff0000', '#00ff00', '#0000ff', '#3ad564']}
                progressBackgroundColor="#ffffff"
              />
            }
          />
        }

        {/* 回到顶部按钮 */}
        <TouchableOpacity style={styles.totop_button} onPress={() => {
          { this.state.currentTab == 0 ? this._flatList.scrollToOffset({ animated: true, viewPosition: 0, index: 0 }) : this.flatList.scrollToOffset({ animated: true, viewPosition: 0, index: 0 }) }
        }}>
          <Image source={require("../../assets/images/socialcircle/toTop.png")} style={styles.add_button_image}></Image>
        </TouchableOpacity>

        {/* 添加发布社圈按钮 */}
        <TouchableOpacity style={styles.add_button} onPress={() => {
          this.props.navigation.push('publish', {
            selectImages: this.state.selectImages,
            refresh: () => {
              // this.handleRefresh().bind(this)
            },
          })
        }}>
          <Image source={require("../../assets/images/socialcircle/add.png")} style={styles.add_button_image}></Image>
        </TouchableOpacity>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    // flex: 1,
    height: "100%"
  },
  header: {
    display: "flex",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    height: 50,
    paddingLeft: 15,
    paddingRight: 15,
    marginTop: 15,
    // backgroundColor: "red"
  },
  location_image: {
    width: 25,
    height: 25,
    resizeMode: "contain"
  },
  location_container: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center"
  },
  location_font: {
    fontSize: 18,
    marginLeft: 5
  },
  more_image: {
    width: 12,
    height: 12,
    resizeMode: "contain",
    marginLeft: 5
  },
  notice_image: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },
  mySocialCircle: {
    display: "flex",
    backgroundColor: "white",
    borderRadius: 10,
    marginBottom: 20,
    marginLeft: 15,
    marginRight: 15
  },
  uploadBoxContainer: {
    padding: 15,
    display: "flex",
  },
  uploadBoxHeadPortrait: {
    display: "flex",
    flexDirection: "row",
    marginBottom: 10,
  },
  headPortraitBox: {
    width: 50,
    height: 50,
    borderRadius: 25,
  },
  headPortrait: {
    width: 50,
    height: 50,
    borderRadius: 25,
    // borderRadius: 50,
    // resizeMode: "contain"
  },
  headPortraitText: {
    height: 50,
    lineHeight: 50,
    marginLeft: 15
  },
  headPortraitName: {
    height: 25,
    lineHeight: 25,
    fontWeight: 'bold',
    fontSize: 16
  },
  headPortraitTime: {
    height: 25,
    lineHeight: 25,
    color: "rgba(0,0,0,0.4)",
    fontSize: 13
  },
  textTitle: {
    // marginTop: 10,\
    flexDirection: "row",
    alignItems: "center",
    flexWrap: "wrap",
    marginBottom: 10,
    // fontWeight: '700',
    // backgroundColor: 'red'
  },
  textTitleTexts: {
    // marginRight: 10,
    fontSize: 17,
    // marginBottom: 10,
  },
  textContent: {
    // marginTop: 10,
    marginBottom: 10,
    // backgroundColor: 'red'
  },
  textContentTexts: {
    fontSize: 17
  },
  textContentLabel: {
    color: "rgba(0, 109, 188, 1)",
    fontSize: 13
  },
  locationBox: {
    display: "flex",
    flexDirection: "row",
    marginBottom: 10,
    alignItems: "flex-start"
  },
  locationBoxImage: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },
  locationBoxFont: {
    marginLeft: 5,
    color: 'rgba(103, 103, 103, 1)'
  },
  timesBox: {
    display: "flex",
    flexDirection: "row",
    // marginTop: 10,
    justifyContent: "space-between"
  },
  timesViews: {
    display: "flex",
    flexDirection: "row"
  },
  timesViewsImage: {
    width: 20, height: 20,
    resizeMode: "contain"
  },
  timesViewsFont: {
    color: "rgba(0,0,0,0.4)",
    marginLeft: 5
  },
  likeCommentBox: {
    display: "flex",
    flexDirection: "row"
  },
  likeBox: {
    display: "flex",
    flexDirection: "row"
  },
  likeBoxImage: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },
  likeBoxFont: {
    color: "rgba(0,0,0,0.6)",
    marginLeft: 5
  },
  commentBox: {
    display: "flex",
    flexDirection: "row",
    marginLeft: 15
  },
  commentBoxImage: {
    width: 20,
    height: 20,
    resizeMode: "contain"
  },
  commentBoxFont: {
    color: "rgba(0,0,0,0.6)"
  },
  row: {
    flexDirection: "row",
    width: '100%',
    // justifyContent: 'flex-start',
    // alignContent: "flex-start",
    justifyContent: 'flex-start',
    flexWrap: "wrap",
    // backgroundColor: 'red',
    marginBottom: 10
  },
  labelRow: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: "center",
    // justifyContent: "space-between",
    flexWrap: "wrap",
    marginBottom: 10,
    // marginLeft: 10
    // backgroundColor: 'red'
  },
  item: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: '32%',
    // marginTop: 10,
    height: 100,
  },
  itemMr: {
    flexDirection: "row",
    justifyContent: "space-between",
    width: '32%',
    // marginTop: 10,
    marginRight: "2%",
    height: 100,
  },
  SystemPrompt: {
    width: "100%",
    height: 100,
  },
  statusBar: {
    width: width,
    height: statusBarHeight,
    backgroundColor: 'transparent',
  },
  totop_button: {
    width: 40,
    height: 40,
    position: 'absolute',
    right: 40,
    bottom: 100
  },
  add_button: {
    width: 40,
    height: 40,
    position: 'absolute',
    right: 40,
    bottom: 50
  },
  add_button_image: {
    width: 50,
    height: 50,
    resizeMode: "contain"
  },
  padlr: {
    // paddingLeft: 15,
    // paddingRight: 15,
    paddingTop: 10,
  },
  tabWarper: {
    flexDirection: "row",
    paddingLeft: 20
    // justifyContent: "center"
  },
  tab: {
    // width: "60%",
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
  },
  tabItemActive: {
    width: 50,
    textAlign: "center",
    fontSize: 16,
    color: "#1890FF",
    fontWeight: "700",
    paddingBottom: 5,
    borderBottomColor: "#1890FF",
    borderBottomWidth: 3,
    marginRight: 5
  },
  tabItemNo: {
    width: 50,
    textAlign: "center",
    fontSize: 16,
    color: "rgba(196, 196, 196, 1);",
    marginRight: 5
  },
  subscribe_style: {

    paddingVertical: 40,
    justifyContent: 'center',
    alignItems: 'center',
    margin: 10,
    // backgroundColor: '#ddd'
  },
  no_subscribe_text: {
    fontSize: 17,
    color: "rgba(196, 196, 196, 1)"
  },
  bottom_container: {
    height: 100,
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  bottom_text: {
    color: "rgba(196, 196, 196, 1)"
  },
  IndicatorContainer: {
    alignItems: "center"
  },
})